<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>+</button>
    <script>
        /*
        javaScript 是一个单线程的脚本语言
        JavaScript中的任务分为：同步任务和异步任务
            同步任务： 指的是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
            异步任务： 指的是不进入主线程，某个异步任务可以执行了，该任务才会进入主线程执行。其中异步任务又包括宏任务（macrotask ）和微任务（microtask ）

            1. 同步和异步任务在不同的执行"场所"，同步的进入主线程，异步的进入Event Table执行并注册函数。
            2. 当指定的异步事情完成时，Event Table会将这个函数移入Event Queue。
            3. 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，推入主线程执行。
            4. js引擎的monitoring process进程会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event
            Queue那里检查是否有等待被调用的函数。上述过程会不断重复，也就是常说的Event Loop(事件循环也可以叫事件轮询)。

         */


        /*console.log(111);
           setTimeout(()=>{
               console.log(222);
           },1000)
           console.log(333); 
           输出顺序 111 333 222
        */

        /* console.log(111);
        setTimeout(() => {
            console.log(222);
        }, 0)
        console.log(333); 
        输出顺序 111 333 222
        */

        console.log(1);
        document.querySelector("button").addEventListener("click", function () {
            console.log(4);
        })
        console.log(2);
        setTimeout(() => {
            console.log(3);
        }, 3000)

    </script>
</body>

</html>